<template>
  <div id="nav" v-if="isShow">
    <Logo :src="currLogoSrc" :color="currColor"
      >大桌蹄子</Logo
    >
    <nav>
      <router-link to="/index" :style="{ color: currColor }"
        >首 &nbsp;&nbsp;&nbsp;&nbsp; 页</router-link
      >
      <router-link to="/book" :style="{ color: currColor }"
        >餐厅预订</router-link
      >
      <router-link to="/foods" :style="{ color: currColor }"
        >菜品介绍</router-link
      >
      <router-link to="/joinus" :style="{ color: currColor }"
        >招贤纳士</router-link
      >
      <router-link to="/about" :style="{ color: currColor }"
        >关于我们</router-link
      >
      <router-link to="/maerdaifu" :style="{ color: currColor }"
         class="animate__animated" :class="{ animate__tada: isAnimate }" @mouseover.native="isAnimate=true" @mouseout.native="isAnimate=false"><i class="fa fa-trophy"></i
      ></router-link>
    </nav>
  </div>
</template>

<script>
import Logo from "./Logo.vue";

export default {
  name: "Nav",
  components: {
    Logo,
  },
  props: {
    color: String,
  },
  data() {
    return {
      currColor: this.color,
      currLogoSrc: '',
      isAnimate: false,
      isShow: true,
    };
  },
  watch: {
    $route: {
      handler() {
        // 判断是否路由到404，如果是不显示该组件
        this.isShow = !(this.$route.matched[0].path === '*');
        // 判断导航栏文字颜色（马尔代夫页为黑色，其他均为白色）
        if (this.$route.path.match(/\/maerdaifu/g)) {
          this.currColor = "#000";
          this.currLogoSrc = require('../assets/img/maerdaifu/_logo2.png');
        } else {
          this.currColor = this.color;
          this.currLogoSrc = require('../assets/_logo.png');
        }
      },
      immediate: true
    },
  },
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: "hanbiao";
  src: url(../assets/hanbiao.ttf); /* 汉标精工喜事体 */
}

#nav {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;

  nav {
    margin: 30px;
    float: right;

    a {
      position: relative;
      float: left;
      text-decoration: none;
      font-size: 20px;
      font-weight: bold;
      margin: 0 2.4vw;
      // color: #fff;
      transition: color 0.3s;

      &:not(:last-child)::after {
        position: absolute;
        content: "";
        display: block;
        height: 3px;
        width: 0;
        background-color: #b35f30;
        margin: auto;
        left: 0;
        right: 0;
        bottom: -5px;
        transition: width 0.3s;
      }
      &:hover {
        color: #b35f30 !important;
      }
      &:hover::after {
        width: 30px;
      }
    }
  }
}
// .fa-shopping-cart {
//   color: #fff;
//   font-size: 20px;
// }
// .fa-shopping-cart:hover {
//   color: #b35f30;
// }
</style>